<template>
  <div class="app">
    <div class="top">
      <div class="nav">
        <p>积云会员管理系统</p>
        <div>
          <el-form label-position="right" label-width="80px" :model="obj">
            <el-form-item label="用户名">
              <el-input
                v-model="obj.username"
                class="btn"
                type="text"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                v-model="obj.password"
                class="btn"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="submit" type="primary">登陆</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        username: "",
        password: "",
      },
    };
  },
  mounted() {},
  methods: {
    submit() {
      this.$axios.post(
        '/api' + "/user/login",
        {
          username:this.obj.username,
          password: this.obj.password,
        }
      ).then((res) => {
        //  console.log( this.obj.username);
        //  console.log( this.obj.password);
          if (res.status == 200) {
            this.$store.commit("username", {
              token: res.data.data.token,
              user: this.obj.username,
            });
             this.$router.push({path:"/index"})
          }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.app {
  width: 100%;
  overflow: hidden;
  height: 721px;
  background-repeat: repeat;
  background: url(/login.jpg);
}
.btn {
  width: 86% !important;
}
.top {
  width: 25%;
  height: 44%;
  margin: 0 auto;
  top: 22%;
  border-radius: 11px;
  background: white;
  position: relative;
  background: rgba($color: #fff, $alpha: 0.8);
  .nav {
    width: 100%;
    height: 30px;
    p {
      width: 100%;
      font-size: 25px;
      padding: 27px 0px;
      text-align: center;
      box-sizing: border-box;
    }
  }
}
</style>
